import 'package:flutter/material.dart';

import '../common/common_button.dart';
import '../utils/color_utils.dart';

class Login extends StatelessWidget {
  const Login({super.key});

  Widget buildLogo() {
    return Container(
      width: 64,
      height: 64,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: ColorUtils.black,
        borderRadius: BorderRadius.circular(15)
      ),
      child: const Text(
        "VV",
        style: TextStyle(
          color: Colors.white,
          fontSize: 30,
          fontWeight: FontWeight.w700,
        ),
      ),
    );
  }

  Widget buildHeader() {
    return Text(
      "Welcome to use",
      style: TextStyle(
        color: ColorUtils.black,
        fontSize: 35,
        fontWeight: FontWeight.w700,
      ),
    );
  }

  Widget buildProtocol() {
    return Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          RichText(
              textAlign: TextAlign.center,
              text: TextSpan(
                style: const TextStyle( fontSize: 12),
                children: [
                  TextSpan(
                      text: "Login without boundaries means agreement",
                      style: TextStyle(color: ColorUtils.hit)
                  ),
                  TextSpan(
                    text: "《Use Protocol》",
                    style: TextStyle(color: ColorUtils.black),
                  ),
                ],
              )
          )
        ],
      ),
    );
  }

  Widget buildDivider() {
    return Flex(
      direction: Axis.horizontal,
      children: [
        Expanded(
          flex: 1,
          child: Container(
            height: 0.5,
            color: ColorUtils.divider,
          ),
        ),
        const Padding(
          padding: EdgeInsets.symmetric(horizontal: 10),
          child: Text(
            "or",
            style: TextStyle(
              fontSize: 15,
              color: Color(0xFF86909C),
            ),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            height: 0.5,
            color: ColorUtils.divider,
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    // 获取当前主题色配置
    // final ThemeData themeData = Theme.of(context);

    return Scaffold(
      body: Container(
        padding: const EdgeInsets.symmetric(horizontal: 30),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 100),
            // logo
            buildLogo(),
            const SizedBox(height: 32),
            // 标题
            buildHeader(),
            const SizedBox(height: 40),
            // 手机号码
            TextField(
              keyboardType: TextInputType.phone,
              decoration: InputDecoration(
                hintText: "Enter phone number",
                hintStyle: TextStyle(
                  color: ColorUtils.hit,
                  fontSize: 17,
                  fontWeight: FontWeight.w400,
                ),
                prefixIcon: const Icon(Icons.mobile_friendly_sharp),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: BorderSide(
                    width: 2,
                    color: ColorUtils.black,
                    style: BorderStyle.solid,
                  )
                )
              ),
            ),
            // 密码
            const SizedBox(height: 20),
            Flex(
              direction: Axis.horizontal,
              children: [
                Expanded(
                  flex: 1,
                  child: TextField(
                    keyboardType: TextInputType.emailAddress,
                    decoration: InputDecoration(
                      hintText: "Input",
                      hintStyle: TextStyle(
                        color: ColorUtils.hit,
                        fontSize: 17,
                        fontWeight: FontWeight.w400,
                      ),
                      prefixIcon: const Icon(Icons.email_outlined),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10),
                        borderSide: BorderSide(
                          width: 2,
                          color: ColorUtils.black,
                          style: BorderStyle.solid,
                        )
                      )
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                SizedBox(
                  width: 110,
                  height: 56,
                  child: OutlinedButton(
                    onPressed: () {},
                    style: ButtonStyle(
                      side: WidgetStateProperty.all(
                        const BorderSide(width: 2),
                      ),
                      shape: WidgetStateProperty.all(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10),
                        )
                      )
                    ),
                    child: Text("Obtain",
                      style: TextStyle(
                        color: ColorUtils.black,
                        fontWeight: FontWeight.w600,
                        fontSize: 16
                      )
                    )
                  ),
                ),
              ],
            ),
            // 登录按钮
            const SizedBox(height: 20),
            CommonButton(
              text: "Log in",
              height: 56,
              radius: 10,
              color: ColorUtils.button,
              onPress: () {
                print(123);
              },
            ),
            // 分割线
            const SizedBox(height: 20),
            buildDivider(),
            const SizedBox(height: 20),
            // 账号登录
            SizedBox(
              width: double.infinity,
              height: 56,
              child: ElevatedButton(
                onPressed: () {  },
                style: ButtonStyle(
                  shape: WidgetStateProperty.all(RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ))
                ),
                child: Text("Account Login", style: TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: 17,
                  color: ColorUtils.black
                )),
              ),
            ),
            // 协议信息
            buildProtocol(),
            const SizedBox(height: 20)
          ],
        ),
      ),
    );
  }
}
